<nz-tabset
  class="main-view-tabs"
  [nzAnimated]="false"
  nzSize="small"
  [nzTabBarGutter]="16"
  [(nzSelectedIndex)]="selectedIndex"
>
  <nz-tab [nzTitle]="'QUERY_TAB' | translate">
    <div class="query-editor-container">
      <app-codemirror
        #editor
        class="query-editor__input"
        [fullHeight]="true"
        [extensions]="editorExtensions"
        [ngModel]="query()"
        (ngModelChange)="queryChange.emit($event)"
        ngDefaultControl
      />
    </div>
    <div
      class="variables-editor-container"
      [ngClass]="{ 'show-variables': showVariableDialog() }"
      mwlResizable
      [ngStyle]="{
        minHeight: showVariableDialog() ? variableEditorHeight : undefined,
      }"
      [enableGhostResize]="true"
      [validateResize]="validate"
      (resizeEnd)="onResizeEnd($event)"
    >
      <div
        class="variables-editor--title"
        track-id="toggle_variables"
        (click)="toggleVariableDialog.emit(!showVariableDialog())"
      >
        {{ 'VARIABLES_TEXT' | translate }}
      </div>
      @if (showVariableDialog()) {
        <div
          class="variables-editor-inner"
          [ngClass]="{ hide: !showVariableDialog() }"
        >
          <div
            class="variable-editor-resizer"
            mwlResizeHandle
            [resizeEdges]="{ top: true }"
          ></div>
          <div class="variables-editor-input-container">
            <app-variables-editor
              [variables]="variables()?.variables"
              [variableToType]="variableToType()"
              [tabSize]="tabSize()"
              [showVariableDialog]="showVariableDialog()"
              [enableExperimental]="enableExperimental()"
              (variablesChange)="variablesChange.emit($event)"
            />
          </div>
          <div class="variables-files-container">
            <button
              type="button"
              class="variables-add-files-button"
              track-id="add_file_variable"
              (click)="addFileVariableChange.emit(undefined)"
            >
              {{ 'ADD_FILES_TEXT' | translate }}
            </button>
            <a
              href="https://sirmuel.design/working-with-file-uploads-using-altair-graphql-d2f86dc8261f"
              target="_blank"
              rel="noopener"
            >
              <app-icon name="info" />
              {{ 'LEARN_MORE_TEXT' | translate }}
            </a>
            <div class="variables-files-list">
              @for (file of variables()?.files; track trackByIndex($index, file)) {
                <app-variable-file-item
                  [fileVariable]="file"
                  (fileVariableNameChange)="
                    fileVariableNameChange.emit({ index: $index, name: $event })
                  "
                  (fileVariableDataChange)="
                    fileVariableDataChange.emit({
                      index: $index,
                      fileData: $event.files,
                      fromCache: $event.fromCache,
                    })
                  "
                  (fileVariableIsMultipleChange)="
                    fileVariableIsMultipleChange.emit({
                      index: $index,
                      isMultiple: $event,
                    })
                  "
                  (deleteFileVariableChange)="
                    deleteFileVariableChange.emit({ index: $index })
                  "
                />
              }
            </div>
          </div>
        </div>
      }
    </div>
  </nz-tab>
  <nz-tab [nzTitle]="preRequestTitleTemplate">
    <ng-template #preRequestTitleTemplate>
      <span [ngClass]="{ 'ant-tabs--status-enabled': preRequest()?.enabled }">
        {{ 'PRE_REQUEST_TAB' | translate }}
      </span>
    </ng-template>
    <app-pre-request-editor
      [preRequest]="preRequest()"
      (preRequestScriptChange)="preRequestScriptChange.emit($event)"
      (preRequestEnabledChange)="preRequestEnabledChange.emit($event)"
    />
  </nz-tab>
  <nz-tab [nzTitle]="postRequestTitleTemplate">
    <ng-template #postRequestTitleTemplate>
      <span [ngClass]="{ 'ant-tabs--status-enabled': postRequest()?.enabled }">
        {{ 'POST_REQUEST_TAB' | translate }}
      </span>
    </ng-template>
    <app-post-request-editor
      [postRequest]="postRequest()"
      (postRequestScriptChange)="postRequestScriptChange.emit($event)"
      (postRequestEnabledChange)="postRequestEnabledChange.emit($event)"
    />
  </nz-tab>
  <nz-tab [nzTitle]="authorizationTitleTemplate">
    <ng-template #authorizationTitleTemplate>
      <span
        [ngClass]="{
          'ant-tabs--status-enabled': isAuthorizationEnabled(),
        }"
      >
        {{ 'AUTHORIZATION_TAB' | translate }}
      </span>
    </ng-template>

    <app-authorization-editor
      [authorizationState]="authorizationState()"
      (authTypeChange)="authTypeChange.emit($event)"
      (authDataChange)="authDataChange.emit($event)"
    />
  </nz-tab>
</nz-tabset>
